<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .news {
            width: 500px;
            height: 300px;
            margin: 50px auto;
        }

        .news h3 {
            line-height: 30px;
        }

        .news li {
            height: 32px;
            line-height: 32px;
        }
    </style>
</head>

<body>

    <div class="layui-container">
        <div class="news">
            <h3>新闻列表</h3>
            <hr>
            <ul id="list">

            </ul>
            <script type='text/html' id="temp1">
                {% for item in newslist %}
                <li>{{item.title}}</li>
                {% endfor %}
            </script>
            <hr>
            <div id="test1"></div>
        </div>

    </div>



    <script src="layui/layui.all.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nunjucks/3.0.1/nunjucks.min.js"></script>
    <script>
        var laypage = layui.laypage;
        var $ = layui.jquery;

        new Promise((resolve, reject) => {
            $.ajax({
                type: "get",
                url: "/newstotal",
                dataType: "json",
                success: function (result) {
                    console.log(result);
                    resolve(result.count)
                }
            });
        }).then((total) => {
                laypage.render({
                    elem: 'test1',
                    count: total, // 数据总数，从服务端得到
                    limit: 10,
                    // layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                    jump: function (obj, first) {
                        $.ajax({
                            type: "get",
                            url: "/getnews",
                            data: { curr: obj.curr, limit: obj.limit },
                            dataType: "json",
                            success: function (result) {
                                console.log(result);
                                nunjucks.configure({ autoescape: true });
                                let mylist = nunjucks.renderString($('#temp1').html(), { newslist: result.listData });
                                $('#list').html(mylist);
                            }
                        });
                    }
                })
            })

    </script>
</body>

</html>